<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
</head>

<body>

	<!-- fieldset:给包裹在里面的元素给一个边框,类似于分组 -->
	<fieldset>
		<!-- 在边框上方给一个标题 -->
		<legend>用户登录</legend>

		<!-- form表单:action:提交的后台地址;method:提交方式;enctype:提交类型,多用于文件上传 -->
		<form action="" method="" enctype="multipart/form-data">
			<!-- 根据type的不同显示不同的内容,name:控件名;value:控件值;size:控件宽度;maxlength:允许输入的最大字符数 -->
			<!-- autofocus:自动聚焦;autocomplete:自动完成,input必须有name属性;required:必填; -->
			<!-- accesskey:规定激活元素(元素获得焦点)的快捷键,采用alt+字母的形式 -->
			<!-- text:文本框 -->
			用户名: <input type="text" value="派克钢笔" placeholder="占位符,当value没有值时的提示信息" autofocus autocomplete="on" required
				accesskey="s" />
			<br />

			<!-- password:密码  -->
			密　码: <input type="password" maxlength="6" /> <br />

			<!-- 类似于下拉框,但是可以根据字符进行提示,稍微友好一点.同过input的list和datalist的id进行绑定 -->
			<input type="text" value="输入明星" list="star" />
			<datalist id="star">
				<!-- datalist里面用id来实现和input链接 -->
				<option>刘德华</option>
				<option>刘若英</option>
				<option>刘晓庆</option>
				<option>郭富城</option>
				<option>张学友</option>
				<option>郭郭</option>
			</datalist>

			<!-- radio:单选,checkbox:复选,button:普通按钮,submit:提交按钮,reset:重置,image:图像形式的提交按钮 -->
			<!-- 单/复选框如果是一组,通过相同的name值来实现单/多选-->
			性　别:　
			<input type="radio" name="sex" /> 女
			<input type="radio" name="sex" /> 男
			<input type="radio" name="sex" checked="checked" /> 人妖
			<input type="radio" name="sex1" /> 未知
			<br />
			<!-- 复选框可以同时选择多个 --><br />
			爱　好:　
			<input type="checkbox" name="hobby" checked="checked" /> 足球
			<input type="checkbox" name="hobby" /> 篮球
			<input type="checkbox" name="hobby" /> 乒乓球
			<!-- button:普通按钮;submit:提交按钮;reset:重置 -->
			搜索： <input type="button" value="搜索啥" /><br />
			<input type="submit" value="提交表单" />
			<input type="reset" value="重置表单" /><br />
			<!-- image:图像形式的提交按钮;file:文件按钮,multiple多文件上传 -->
			<input type="image" src="im.jpg" /><br />
			上传头像:<input type="file" multiple />

			<!-- 下拉框:selected:默认选项 -->
			籍贯:
			<select>
				<option>点击选择您的籍贯</option>
				<option>北京</option>
				<option>上海</option>
				<option>广州</option>
				<option selected="selected">星星</option>
			</select>
			<select>
				<option>点击选择您的城市</option>
				<option>海淀</option>
				<option>昌平</option>
				<option>通州</option>
				<option>大兴</option>
			</select>

			<!-- 文本域:cols:每行中的字符数;rows:显示的行数 -->
			<textarea cols="4" rows="5"> 请输入留言 </textarea>

			<h3>label:绑定一个表单元素,当点击label的时候直接选中绑定的表单元素</h3>
			<h3>如果label里面有多个表单,想定位到某个可以通过for#id的格式来实现</h3>
			<label>输入账号:<input type="text" /> </label> <br />
			<label for="two">输入账号: <input type="text" /> <input type="text" id="two" /></label>
		</form>
	</fieldset>

	<fieldset>
		<legend>HTML5新增的INPUT type类型</legend>
		<form action="">
			邮箱: <input type="email" /> <!-- aa@aa.com --> <br />
			手机: <input type="tel" /> <!-- 手机格式 数字 --> <br />
			数字: <input type="number" /> <!-- 只能 是 数字 --> <br />
			url: <input type="url" /> <!-- 网址格式的 --> <br />
			搜索: <input type="search" /> <!-- 搜索思密达 --> <br />
			区域: <input type="range" /> <!-- 区域 奥哈药 滑块  --> <br />
			时间: <input type="time" />
			<!--小时 分钟  --> <br />
			年月日: <input type="date" />
			<!--获得年月日 --> <br />
			月份: <input type="month" />
			<!--获得年月 --> <br />
			星期: <input type="week" />
			<!--获得周 --> <br />
			颜色: <input type="color" /> <!-- 颜色 --> <br />
			<input type="submit" />
		</form>
	</fieldset>
</body>

</html>